<template>
	<view class="cart">
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-gradual-red" :isBack="false">
				<block slot="content">订单列表</block>
			</cu-custom>
			<scroll-nav class="space-around fixscrol" :brands="brands" @tabtap="tabtap" ref='brands'></scroll-nav>
			<!-- 购物车为空 S -->
			<!-- <view class="empty">
				<view class="empty-tips" v-if="token">
					<empty></empty>
				</view>
				<view class="empty-tips" v-else>
					空空如也
					<navigator class="navigator" url="/pages/login/login" open-type="switchTab">
						登录
					</navigator>
				</view>
			</view> -->
			<!-- 购物车为空 E -->
			<!-- 购物车列表 S -->
			<empty v-if="auctionpageData.length == 0"></empty>
			<view class="goods-list" v-else>
				<view class="btn-clear">
					<view class="">
						共{{auctionpageData.length}}件宝贝
					</view>
				</view>
				<view class="yh-cart-row">
					<!-- 商品列表 S -->
					<block v-for="(item, index) in auctionpageData" :key="index">
						<view class="carrier" @click="godetail(item)">
							<view class="shop">
								<view class="left">
									<!-- <uni-icons class="select" :type="item.isShop ? 'checkbox-filled':'circle'" size="30"
											@click="chooseShopSelect(index)"></uni-icons> -->
									<view class="shop-name">
										<view class="name">
											{{item.status == 1 ? '已付款' : '未付款'}}
										</view>
									</view>
								</view>
							</view>
							<view class="goods">
								<view class="right">
									<image class="goods-image" :src="$getFileAccessHttpUrl(item.cover)"></image>
									<view class="goods-info">
										<view class="goods-name">
											{{item.orderName}}
										</view>
										<view class="goods-price">
											<view class="price">
												<block>
													<text class="price-symbol">¥</text>
													<text class="price-marked">{{item.moneys}}</text>
												</block>
											</view>
											<!-- 										<view class="amount">
												<view class="num-minus" @click="chooseMinus(index, gIndex)">
													-
												</view>
												<view class="input-price">
													2
												</view>
												<view class="num-add" @click="chooseAddNum(index, gIndex)">
													+
												</view>
											</view> -->
										</view>
									</view>
								</view>
							</view>
							<view class="shoping">
								
								<view v-if="item.status == 0" class="fk-count-btn plani" @click.stop="closeshoping(item)">
									取消付款
								</view>
								<view v-if="item.status == 0" class="goods-count-btn" @click.stop="toggleshoping(item)">
									付款
								</view>
							</view>

						</view>
					</block>
					<view class="loadingType">{{loadingType == true ?'没有更多数据了!' : '上拉显示更多'}}</view>
					<!-- 商品列表 E -->
				</view>

			</view>
			<!-- 付款弹框 -->
			<uni-popup ref="popupcenter" class="popupcenter" type="bottom" :mask-click="true">
				<view class="scortop">
					<view class="title">付款二维码</view>
					<uni-icons type="close" size="30" @click="compcloseBidding"></uni-icons>
				</view>
				<view class="padding poputchan">
					<view class="">长按识别二维码(点击打开长按保存)</view>
				</view>
				<view>
					<!-- 二维码 -->
					<view class="qr-box">
						<canvas canvas-id="qrcode" @click.stop="photoPreview(urlCode,0)" style="width: 300rpx;margin: 0 auto;" />
						<image hidden :src="$getFileAccessHttpUrl(urlCode)" mode="aspectFill" ></image>
					</view>
				</view>
				<view class="padding poputchan">
					<view class="" style="color: red;">{{orderMessage}}</view>
				</view>
			</uni-popup>

		</scroll-view>

	</view>
</template>

<script>
	import server from '@/api/server.js'
	import uQRCode from '@/common/util/uqrcode' //引入uqrcode.js
	import {
		USER_INFO
	} from "@/common/util/constants"
	import scrollNav from '../component/scrollNav.vue'

	export default {
		components: {
			scrollNav,
		},
		data() {
			return {
				loadingType: false,
				token: '',
				errirImage: '/static/home/128/wenan.png',
				rightImage: '', // 右箭头图标
				shopImage: '', // 店铺图标
				selectDefault: '', // 默认图标 
				selectPitchOn: '', // 选中图标
				upImage: '', // 上
				downImage: '', // 下
				loseEfficacyImage: '', // 失效
				brands: [
					'待付款',
					'已付款',
				],
				urlCode:'',
				goodsLoseEfficacy:	 [],
				auctionpageData: [],
				total: 0, // 选中商品总价
				tabIndex: 0,
				urlCode:'',
				timeurlCode:null,
				orderMessage:'',
				getQrOrderNo:'',
				params: {
					status: 0,
					pageNo: 1,
					pageSize: 10,
				},
			}
		},
		beforeDestroy(){
			 console.log("this.liveCountTimes",'22222222222222222222222222222')
			 
			 clearInterval(this.timeurlCode)
			 this.timeurlCode = null;
		 },
		mounted() {
			this.apiorderpage()
		},
		methods: {
			//取消付款
			closeshoping(data){
				uni.showModal({
					title: '提示',
					content: '确定取消付款！',
					success: (showResult) => {
						if (showResult.confirm) {
							server.applygetQrCode({orderId:data.orderId}).then(res => {
								console.log(res)
								if (res.data.success) {
									this.$tip.success(res.data.message)
									this.apiorderpage()
								} else {
									this.$tip.error(res.data.message)
								}
							})
						} else {
				
						}
				
					}
				})
				
			},
			//付款
			toggleshoping(data) {
				this.orderMessage = ''
				this.$refs.popupcenter.open('top')
				this.apiapplygetQrCode(data.orderNo)
				
			},
			//生成付款二维码
			apiapplygetQrCode(orderNo){
				let that = this
				that.getQrOrderNo = orderNo
				server.applygetQrCode({orderNo:that.getQrOrderNo}).then(res => {
					console.log(res)
					if (res.data.success) {
						let urlCode = res.data.result.code_url
						this.qrFun(urlCode)
						that.timeurlCode = setInterval(function() {
							console.log('getCurrentSwiperHeigh1111',234567654321234567)
							that.apiapplyqueryOrder(that.getQrOrderNo)
						}, 2000)
					} else {
						this.$refs.popupcenter.close()
						this.$tip.error(res.data.message)
					}
				})
			},
			//查询订单
			apiapplyqueryOrder(orderNo){
				server.applyqueryOrder({orderNo:orderNo}).then(res => {
					console.log(res)
					if (res.data.success) {
						if(res.data.code == 301){ //支付中
							this.orderMessage = res.data.message
						}else if(res.data.code == 200){ //成功
							clearInterval(this.timeurlCode)
							this.timeurlCode = null;
							this.$refs.popupcenter.close()
							this.$tip.success(res.data.message)
							this.apiorderpage()
						}
					} else {
						this.orderMessage = res.data.message
					}
				})
			},
			//**生成二维码**//
			qrFun(urlCode) {
				let that = this
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: urlCode,
					size: 150,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						that.urlCode = res
					}
				})
			},
			//图片预览保存
			photoPreview(data, index) {
				let photoList = []
				photoList.push(data)
				uni.previewImage({
					current: index,
					urls: photoList
				});
			},
			compcloseBidding() {
				this.$refs.popupcenter.close()
			},
			tabtap(index) {
				this.loadingType = false
				this.auctionpageData = []
				this.params.pageNo = 1
				this.tabIndex = index;
				this.apiorderpage()
			},
			
			// 查询列表
			apiorderpage() {
				let obj = {
					status: this.tabIndex,
					pageNo: 1,
					pageSize: 10
				}
				this.params.status=this.tabIndex
				server.orderpage(this.params).then(res => {
					console.log(res)
					if (res.data.success) {
						
						if (res.data.result.records.length != 10) { //没有数据
							this.loadingType = true;
						}
						this.params.pageNo++; //每触底一次 page +1
						this.auctionpageData = this.auctionpageData.concat(res.data.result.records)
					} else {
						this.$tip.error(res.data.message)
					}
				})
			},
			godetail(data){
				console.log('data',data)
				uni.navigateTo({
					url: '/pages/order/orderdetail?orderId=' + data.orderId
				})
			},
			// 选中商品删除
			chooseGoodsDelete() {
				uni.showModal({
					content: "确认将这" + 1 + "个宝贝删除?",
					cancelText: "我再想想",
					cancelColor: "#999999",
					confirmText: "删除",
					confirmColor: "#fa436a",
					success(res) {
						if (res.confirm) {
							console.log("删除")
						} else if (res.cancel) {
							console.log("我再想想")
						}
					},
				})
			},
			// 选中商品移至收藏夹
			chooseGoodsEnshrine() {
				console.log("收藏")
			},
			// 清空失效商品
			chooseLoseEfficacyGoodsEmpty() {
				uni.showModal({
					content: "确认清空失效宝贝吗?",
					cancelText: "我再想想",
					cancelColor: "#999999",
					confirmText: "清空",
					confirmColor: "#fa436a",
					success(res) {
						if (res.confirm) {
							console.log("清空")
						} else if (res.cancel) {
							console.log("我再想想")
						}
					},
				})
			},
			// 计算总价
			totalPrice() {
				let cartList = this.cartList;
				let total = 0;
				let goods_num = 0;
				for (let i = 0; i < cartList.length; i++) {
					for (let j = 0; j < cartList[i].goods.length; j++) {
						if (cartList[i].goods[j].selected) {
							total += cartList[i].goods[j].goods_price * cartList[i].goods[j].goods_num;
							goods_num += cartList[i].goods[j].goods_num;
						}
					}
				}
				this.total = total;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.goods-list {
		float: left;
		width: 100%;
	}

	.rightText {
		font-size: 15px;
		padding-top: 3px;
	}

	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFFF;

		.icongouwuche {
			width: 190upx;
		}

		.empty-tips {
			display: flex;
			font-size: 15px;
			color: blue;

			.navigator {
				margin-left: 16upx;
			}
		}
	}

	.goods-list {
		.btn-clear {
			display: flex;
			justify-content: space-between;
			margin: 40upx 30upx 20upx;
			letter-spacing: 2px;
		}

		.yh-cart-row:last-child {
			margin: 30upx 30upx 0;
		}

		.yh-cart-row {
			border-radius: 5px;
			margin: 0 10px 10px;

			.carrier:last-child {
				border-bottom: none;
			}

			.carrier {
				border-radius: 15px;
				margin-bottom: 10px;
				background-color: white;
				padding: 10px;

				.shop {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.left {
						display: flex;
						align-items: center;

						.select {
							margin-right: 5px;
						}

						.shop-name {
							display: flex;
							align-items: center;

							.icon-shop {
								width: 42upx;
								height: 42upx;
								margin-right: 5px;
							}

							.name {
								font-size: 15px;
								color: orange;
								font-weight: 600;
							}
						}
					}

					.right {
						width: 30upx;
						margin-left: 5px;
					}
				}

				.goods {
					display: flex;
					align-items: center;
					position: relative;

					.goods-lose-efficacy-identifying {
						width: 100upx;
						height: 100upx;
						position: absolute;
						z-index: 99;
						right: 0upx;
						margin-top: -75upx;
					}

					.left {
						.select {
							width: 40upx;
							margin-right: 5px;
						}
					}

					.right {
						display: flex;
						z-index: 2;

						.goods-image {
							width: 220upx;
							height: 220upx;
							margin-right: 20upx;
							border-radius: 15px;
						}

						.goods-info {
							padding-top: 10upx;

							.goods-name {
								font-size: 14px;
							}

							.specification {
								display: flex;
								align-items: center;
								margin-top: 10upx;

								.specification-name {
									font-size: 14px;
									color: #999;
									background: #f3f3f3;
									padding: 4px;
								}

								.specification-image {
									width: 25upx;
									margin-left: 5px;
								}
							}

							.goods-price {
								display: flex;
								justify-content: space-between;
								margin-top: 20upx;

								.price {
									color: red;
									font-weight: bold;

									.price-symbol {
										font-size: 13px;
									}

									.price-marked {
										font-size: 16px
									}
								}

								.amount {
									display: flex;
									align-items: center;
									height: 25px;
									line-height: 25px;
									border: 1px solid #999;
									border-radius: 5px;

									.num-minus,
									.num-add {
										width: 40upx;
										height: 25px;
										line-height: 25px;
										text-align: center;
									}

									.num-minus {
										height: 25px;
										line-height: 25px;
										border-right: 1upx solid #999;
									}

									.num-add {
										height: 25px;
										line-height: 25px;
										border-left: 1upx solid #999;
									}

									.input-price {
										width: 60upx;
										text-align: center;
									}
								}
							}
						}

						.goods-info-s {
							// 失效商品样式
							width: 400upx;
							padding-top: 10upx;

							.goods-names {
								font-size: 14px;
								color: blue;
							}

							.specification {
								display: flex;
								align-items: center;
								margin-top: 10upx;

								.specification-name {
									font-size: 15px;
									color: blue;
								}

								.specification-image {
									width: 25upx;
									margin-left: 5px;
								}
							}

							.goods-price {
								display: flex;
								justify-content: space-between;
								margin-top: 20upx;
								align-items: center;

								.goods-cause {
									// 商品失效原因
									font-size: 15px;
									margin-top: 45upx;
								}

								.goods-similarity {
									font-size: 15px;
									color: blue;
									padding: 5upx 10upx;
									border: 1upx solid blue;
									margin-top: 45upx;
									border-radius: 20upx;
								}
							}
						}
					}
				}

				.carrier-title {
					display: flex;
					justify-content: space-between;
					padding: 20upx 30upx 30upx;

					.goods-lose-efficacy-num {
						font-size: 15px;
						font-weight: 600;
					}

					.goods-lose-efficacy-operation {
						font-size: 15px;
						padding-top: 4upx;
						color: blue;
					}
				}
			}
		}
	}

	.goods-settle-accounts {
		height: 96upx;
		position: fixed;
		bottom: 57px;
		z-index: 99;
		width: 100%;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30upx;

		.left {
			display: flex;
			align-items: center;

			.select {
				margin-right: 5px;
			}
		}

		.right {
			display: flex;
			align-items: center;

			.goods-price-total {
				font-size: 15px;
			}

			.goods-price-total text:nth-child(2) {
				font-size: 13px;
				padding-top: 4upx;
				margin-left: 8upx;
				font-weight: bold;
				color: red;
			}

			.goods-price-total text:nth-child(3) {
				font-size: 18px;
				padding-top: 4upx;
				font-weight: bold;
				color: red;
			}

			.goods-count-btn {
				font-size: 32upx;
				width: 180upx;
				background-image: linear-gradient(90deg, #f43f3b, #B81D22);
				color: white;
				border-radius: 30px;
				height: 66upx;
				text-align: center;
				line-height: 66upx;
				margin-left: 20upx;
			}

			.goods-enshrine {
				color: blue;
				padding: 5upx 20upx;
				border: 1upx solid blue;
				border-radius: 30upx;
				margin-right: 30upx;
			}

			.goods-delete {
				color: blue;
				padding: 5upx 20upx;
				border: 1upx solid blue;
				border-radius: 30upx;
			}
		}
	}

	.orderconter {
		margin-top: 10px;
		border-top: 1px solid #e9e9e9;
		padding-top: 10px;

		.ul {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;

			.right {
				color: #999;
			}
		}
	}

	.shoping {
		display: flex;
		justify-content: flex-end;

		.goods-count-btn,.fk-count-btn {
			font-size: 14px;
			width: 70px;
			background-image: linear-gradient(90deg, #f4b33b, #B81D22);
			color: white;
			border-radius: 30px;
			height: 32px;
			text-align: center;
			line-height: 32px;
			margin-left: 11px;
			transition: all 0.1s;
			&.plani{
				color: #ffffff;
				background: linear-gradient(90deg, #f4b33b, #B81D22);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				border: 1px solid #f4b33b;	   
			}
			&:active{
				color: #ffffff;
				background: linear-gradient(90deg, #f4b33b, #B81D22);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				border: 1px solid #f4b33b;	
			}
		}
		.fk-count-btn::active {
			background-image: linear-gradient(90deg, #f4b33b, #B81D22);
			color: white;		
		}
		
	}

	.popupcenter {
		.poputchan {
			text-align: center;
		}
		.qr-box{
			display: flex;
			justify-content: center;
			uni-image,image{
				width: 150px;
				height: 150px;
			}
		}
	}
	
</style>
